/*
 * @Description: 安全设置
 * @Author: fhw
 * @Date: 2023-01-31 18:16:29
 */
import { errorTips, successTips } from '@/utils'
import { RuleObject } from 'ant-design-vue/lib/form/interface'
import { map } from 'ramda'
import { defineComponent, ref } from 'vue'
import './style.scss'

export default defineComponent({
	name: 'Security',
	setup() {
		const userId = localStorage.getItem('userId') as string
		const antdForm = ref<AntdFrom>()
		const strength = ref('') // 密码强度
		const pageState = ref({
			passwordState: {
				loading: false,
				visible: false,
				form: {
					old_password: '',
					new_password: '',
					ok_password: '',
				},
			},
			dataList: [
				{
					name: '账户密码',
					desc: '当前密码强度',
					details: strength,
					handle: () => {
						pageState.value.passwordState.visible = true
					},
				},
			],
		})
		const validatePass2 = async (rule: RuleObject, value: string) => {
			if (value === '') {
				return Promise.reject('请输入密码')
			} else if (value !== pageState.value.passwordState.form.new_password) {
				return Promise.reject('密码不一致')
			} else {
				return Promise.resolve()
			}
		}
		const validatePass = async (rule: RuleObject, value: string) => {
			if (value === '') {
				return Promise.reject('请输入新密码')
			} else {
				if (pageState.value.passwordState.form.ok_password !== '') {
					antdForm.value?.validateFields('checkPass')
				}
				return Promise.resolve()
			}
		}
		const rules = {
			old_password: [{ required: true, message: '登录密码不能为空！', trigger: 'blur' }],
			new_password: [{ required: true, validator: validatePass, message: '新密码不能为空！', trigger: 'blur' }],
			ok_password: [{ required: true, validator: validatePass2, trigger: 'change' }],
		}
		getAccountSecurity()
		/** 获取密码强度 */
		async function getAccountSecurity() {
			const { success, data, msg } = await API.blog.chatUser.getAccountSecurity.request(userId)
			success ? (strength.value = data.strength) : errorTips(msg)
		}
		function onCancel() {
			pageState.value.passwordState.visible = false
			pageState.value.passwordState.form.new_password = ''
			pageState.value.passwordState.form.old_password = ''
			pageState.value.passwordState.form.ok_password = ''
		}
		async function submit() {
			const params = {
				userId,
				old_password: pageState.value.passwordState.form.old_password,
				new_password: pageState.value.passwordState.form.new_password,
			}
			pageState.value.passwordState.loading = true
			const { success, data, msg } = await API.blog.chatUser.updatePassWord.request(params)
			pageState.value.passwordState.loading = false
			success ? successTips(data) : errorTips(msg)
			onCancel()
			getAccountSecurity()
		}
		return () => (
			<div id="security">
				<h3 class="title">安全设置</h3>
				<ul class="security-list">
					{map((item) => {
						return (
							<li class="security-item">
								<div class="security-content">
									<div class="security-name">{item.name}</div>
									<div class="security-desc">
										{item.desc}：{item.details}
									</div>
								</div>
								<div class="security-tools">
									<a-button type="link" block onClick={item.handle}>
										修改
									</a-button>
								</div>
							</li>
						)
					}, pageState.value.dataList)}
				</ul>
				<a-modal
					visible={pageState.value.passwordState.visible}
					width="24%"
					height="59vh"
					onCancel={onCancel}
					confirmLoading={pageState.value.passwordState.loading}
					title="修改密码"
					wrapClassName="security-modal"
					footer={null}
				>
					<a-form
						model={pageState.value.passwordState.form}
						rules={rules}
						ref={antdForm}
						labelCol={{ span: 6 }}
						wrapperCol={{ span: 15, push: 1 }}
						onFinish={submit}
					>
						<a-form-item label="登录密码" name="old_password">
							<a-input
								v-model={[pageState.value.passwordState.form.old_password, 'value']}
								type="password"
								autocomplete="off"
							/>
						</a-form-item>
						<a-form-item label="设置新密码" name="new_password">
							<a-input
								v-model={[pageState.value.passwordState.form.new_password, 'value']}
								type="password"
								autocomplete="off"
							/>
						</a-form-item>
						<a-form-item label="确认新密码" name="ok_password">
							<a-input
								v-model={[pageState.value.passwordState.form.ok_password, 'value']}
								type="password"
								autocomplete="off"
							/>
						</a-form-item>
						<div style={{ textAlign: 'center' }}>
							<a-button
								type="primary"
								loading={pageState.value.passwordState.loading}
								html-type="submit"
								style="margin-right:10px"
							>
								保存
							</a-button>
							<a-button onClick={onCancel}>取消</a-button>
						</div>
					</a-form>
				</a-modal>
			</div>
		)
	},
})
